<template>
    <div class="info">
        <img class="info_bg pc-box" src="@/assets/images/account_bg.svg" alt="">
        <img class="info_mb_bg h5-box" src="@/assets/images/account_mb_bg.svg" alt="">
        <div class="info_inner">
            <div class="info_left">
                <p class="info_left_label">{{$t('account.availableBalance')}}</p>
                <p class="info_left_money">${{balanceTotal.toFixed(4)}}</p>
                <div class="l-f l-row-sb">
                    <p class="info_left_unit l-text-gradient"> ≈ XAUUSD</p>
                </div>
            </div>
            <img class="info_content h5-box" src="@/assets/images/account_line.svg" />
            <div class="info_right l-f">
                <img class="info_right_icon" src="@/assets/icons/icon-day_up.svg" alt="">
                <p class="info_right_label l-text-gradient">{{$t('account.todaysProfit')}}</p>
                <p class="info_right_money">${{incomeTotal}}</p>
                <p class="info_right_rate l-text-gradient">({{rate}}%)</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import {  getWalletTotalDataApi } from '@/api/userApi'
import { useMainStore } from '@/store'

const mainStore = useMainStore()

const balanceTotal = computed(() => {
      return mainStore.userInfo.balance
  })

const incomeTotal = ref(0)

// 百分比
const rate = computed(() => {
  if(balanceTotal.value > 0 && incomeTotal.value > 0) {
    let num = (incomeTotal.value / balanceTotal.value) * 100
    return num.toFixed(2)
  }
  return 0
})

onMounted(() => {
  getWalletTotalData()
})

// 获取盈亏
const getWalletTotalData = async () => {
  const res = await getWalletTotalDataApi()
  incomeTotal.value = res.fund_profit_loss
}

</script>

<style lang="scss" scoped>
.info {
  margin-top: 20px;
  position: relative;
  height: 230px;
  &_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    object-fit: cover;
    border-radius: 25px;
  }
  &_mb_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    object-fit: cover;
    border-radius: 25px;
  }
  &_inner {
    padding: 40px 70px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    height: 100%;
  }
  &_left {
    &_label {
      font-size: 22px;
      color: #ffffff;
    }
    &_money {
      font-size: 40px;
      color: #ffffff;
      font-weight: 700;
      margin-top: 15px;
    }
    &_unit {
      font-size: 22px;
      font-weight: 400;
    }
  }
  &_content {
    width: 90%;
    margin: 17px 11.5px;
  }
  &_right {
    position: absolute;
    right: 70px;
    bottom: 40px;
    &_icon {
      width: 39px;
      height: 39px;
    }
    &_label {
      font-size: 22px;
      font-weight: 400;
    }
    &_money {
      font-size: 22px;
      color: #d9d9d9;
      margin: 0 5px;
    }
    &_rate {
      font-size: 22px;
      font-weight: 400;
    }
  }
}
@media only screen and (max-width: 1200px) {
  .info {
    margin-top: 0px;
    height: 170px;
    &_inner {
      padding: 16px 24px;
    }
    &_left {
      &_label {
        font-size: 14px;
      }
      &_money {
        font-size: 24px;
        margin-top: 0px;
      }
      &_unit {
        font-size: 14px;
      }
    }
    &_right {
      right: 24px;
      bottom: 16px;
      &_icon {
        width: 20px;
        height: 20px;
      }
      &_label {
        font-size: 12px;
      }
      &_money {
        font-size: 12px;
        margin: 0 5px;
      }
      &_rate {
        font-size: 12px;
      }
    }
  }
}

</style>